@ts-nocheck
<template>
  <div>
    <div class="root-wrapper">
      <div
        class="indicator-wrapper"
        :style="{
          left: showSidebar ? sidebarWidth + 12 + 'px' : '12px',
          padding: '0 ' + indicatorPadding + 'px',
        }"
      >
        <indicatorView ref="indicator" @graphicRatioChanged="setGraphicRatio" />
      </div>
      <div class="config-wrapper">
        <el-scrollbar style="height: 100%">
          <command />
          <config />
        </el-scrollbar>
      </div>
    </div>
    <AlertView v-if="showAlert" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import dayjs from "dayjs";
import indicatorView from "./indicatorView/index.vue";
import config from "./configView/index.vue";
import command from "./commandView/index.vue";
import AlertView from "@/components/Alert/index.vue";

import useCommonStore from "@/store/common.js";
import useSeatStore from "@/store/seat.js";
const commonStore = useCommonStore();
const seatStore = useSeatStore();
const showSidebar = computed(() => commonStore.showSidebar);
const sidebarWidth = computed(() => commonStore.sidebarWidth);
const isServiceAvailable = computed(() => seatStore.isServiceAvailable);
const seatStatusVersion = computed(() => seatStore.seatStatusVersion);
const clientSize = ref({ width: 0, height: 0 });
const graphicRatio = ref(1);
const showAlert = computed(
  () =>
    !seatStore.isServiceAvailable &&
    dayjs().diff(seatStore.seatStatusACCVersion, "minute") > 30
);

const indicatorPadding = computed(() => {
  let maxHeight = clientSize.value.height - 90;
  let maxWidth = clientSize.value.width - 600;
  let preferedWidth = maxHeight * graphicRatio.value;
  if (preferedWidth > maxWidth) return 0;
  return parseInt((maxWidth - preferedWidth) / 2);
});

const setGraphicRatio = (ratio) => {
  graphicRatio.value = ratio;
};

onMounted(() => {
  clientSize.value.width = document.documentElement.clientWidth;
  clientSize.value.height = document.documentElement.clientHeight;
  window.onresize = () => {
    clientSize.value.width = document.documentElement.clientWidth;
    clientSize.value.height = document.documentElement.clientHeight;
  };
});
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.root-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: top;
}

.indicator-wrapper {
  position: fixed;
  top: 60px;
  bottom: 16px;
  left: 212px;
  right: 400px;
  display: flex;
  overflow-y: auto;
  z-index: 10;
  /* border: 1px solid rgba(128, 128, 128, 0.2); */
  transition: all 0.3s ease-in-out;
}

.config-wrapper {
  position: fixed;
  right: 0px;
  top: 60px;
  bottom: 16px;
  width: 380px;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  /* border-left: 1px solid rgba(128, 128, 128, 0.2); */
  /* border: 1px solid rgba(128, 128, 128, 0.2); */
  z-index: 10;
}
</style>
